@import '../common.less';
/* latin */
@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v9/5h1aiZUrOngCibe4TkHLQka4BU4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.@{prefix}-calendar {
    width: 100%;
    max-height: 100%;
    padding-bottom: 20rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    font-size: 28rpx;
    background-color: var(--white);
    border-radius: 56rpx 56rpx 0 0;
    transition: transform .3s;
    -webkit-overflow-scrolling: touch;
    &__header {
        position: relative;
        box-shadow: 0 4rpx 12rpx rgba(51, 51, 51, .2);
       &-title {
            text-align: center;
            height: 72rpx;
            line-height: 72rpx;
            font-weight: 500;
            color: var(--black);
       }
       .icon-close {
           position: absolute;
           top: 30rpx;
           right: 30rpx;
       }
    }
    &__weekdays {
        .@{prefix}-calendar__weekday {
            font-size: 24rpx;
            text-align: center;
            line-height: 60rpx;
        }
    }
    &__action {
        padding: 0 0 30rpx;
        .@{prefix}-calendar__header-subdate {
            text-align: center;
            font-size: 24rpx;
            height: 48rpx;
            line-height: 48rpx;
            font-weight: 500;
            margin: 0 30rpx;
            color: var(--black);
        }
        &-icon {
            margin: 0 10rpx;
        }
    }
    &__body {
        margin-top: 24rpx;
        &-month {
            .@{prefix}-calendar__days {
                position: relative;
                .@{prefix}-calendar__day {
                    position: relative;
                    width: 14.285%;
                    height: 108rpx;
                    font-size: 32rpx;
                    z-index: 10;
                    &.active {
                        border-radius: 8rpx;
                    }
                }
                .@{prefix}-calendar__month-mark {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 0;
                    color: rgba(0, 0, 0, .08);
                    font-size: 320rpx;
                    transform: translate(-50%, -50%);
                    pointer-events: none;
                    font-family: 'Monoton', cursive;
                }
            }
        }
    }
    &__footer {
        &-choose {
            text-align: center;
            margin: 24rpx auto;
        }
        .confirm-btn {
            width: 96%;
            margin: 0 auto;
        }
    }
}
.@{prefix}-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .7);
}
